<template>
  <div>
     <el-dialog
      title="修改缴费通知书"
      :visible.sync="isShow"
      width="40%"
      center
      :before-close="handleClose">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
       <el-form-item label="联络人" prop="liaisons">
          <el-input v-model.trim="form.liaisons"></el-input>
        </el-form-item>
         <!--
        <el-form-item label="案件名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="申请号" prop="application_number">
          <el-input v-model="form.application_number"></el-input>
        </el-form-item> -->

        <el-form-item label="代理费" prop="agent_money">
          <el-input v-model.trim="form.agent_money"></el-input>
        </el-form-item>
        <el-form-item label="官费" prop="gov_money">
          <el-input v-model.trim="form.gov_money"></el-input>
        </el-form-item>
        <el-form-item label="修改原因" prop="remarks">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" v-no-more-click:3000 @click="submit('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data () {
    var validateMoney = (rule, value, callback) => {
      // if (value === '') {
      //   callback(new Error('请输入金额'));
      // } else {
        if (!Number(value)) {
          callback(new Error('请输入正确的金额'));
        } else if (value <= 0) {
          callback(new Error('金额必须大于0'));
        } else {
          callback()
        }
      // }
    }
    var validateRemarks = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入修改原因'))
      } else {
        callback()
      }
    }
    var validateLiaisons = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入联络人'))
      } else {
        callback()
      }
    }
    return {
      form : {
        liaisons: '',
        name: '',
        application_number: '',
        agent_money: '',
        gov_money: '',
        remarks: '',
        file2: null
      },
      isShow: false,
      rules: {
        // liaisons: [
        //   { validator: validateLiaisons, trigger: 'change' }
        // ],
        name: [
          { required: true, message: '请输入案件名称', trigger: 'change' }
        ],
        application_number: [
          { required: true, message: '请输入申请号', trigger: 'change' }
        ],
        // agent_money: [
        //   { validator: validateMoney, trigger: 'change' }
        // ],
        // gov_money: [
        //   { validator: validateMoney, trigger: 'change' }
        // ],
        remarks: [
          { validator: validateRemarks, trigger: 'change' }
        ]
      },
      id: null,
      baseUrl: global.baseurl,
    }
  },

  methods: {
    show (pId, pFile) {
      this.id = pId
      if (pFile) {
        this.form.file2 = pFile
      }
      this.isShow = true
    },
    submit (formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.submitPost()
        }
      })
    },
    submitPost() {
      let form = new FormData()
      if (this.form.file2) {
        form.append('file2', this.form.file2)
      }
      if (this.form.liaisons != '') {
        form.append('liaisons', this.form.liaisons)
      }
      if (this.form.agent_money != '') {
        form.append('agent_money', this.form.agent_money)
      }
      if (this.form.gov_money != '') {
        form.append('gov_money', this.form.gov_money)
      }
      // form.append('name', this.form.name)
      // form.append('application_number', this.form.application_number)
      form.append('remarks', this.form.remarks)
      axios({
        method: "post",
        url: this.baseUrl + `/api/finals/${this.id}/edit/notice`,
        data: form,
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: "Bearer " + this.$store.state.token
        }
      }).then(res => {
        if (res.data.status == "success") {
          this.$message({
            message: '修改缴费通知书成功！',
            type: 'success'
          })
          this.handleClose()
        } else {
          this.$message({
            type: "error",
            message: res.data.message
          })
        }
      })
    },
    handleClose () {
      this.$refs.ruleForm.resetFields()
      this.isShow = false
    }
  }
}
</script>

<style lang='less' type='text/css'>

</style>
